<template>
  <view class="uni-empty" :class="position" :style="{'top': 'calc(50% + ' + top + 'px)'}">
    <view class="uni-empty-img">
      <image :src="src"></image>
    </view>
    <view class="uni-empty-label">{{ label }}</view>
  </view>
</template>

<script>
export default {
  name: "UniArticleInfo",
  components: {},
  data() {
    return {}
  },
  props: {
    label: {
      type: String,
      default: "暂无相关数据"
    },
    top: {
      type: Number,
      default: 0
    },
    position: {
      type: String,
      default: null
    },
    src: {
      type: String,
      default: "/static/img/empty.png"
    }
  },
  mounted() {
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.uni-empty {
  text-align: center;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;

  &.absolute {
    position: absolute;
  }

  &.relative {
    position: relative;
    transform: translate(-50%, 0);
  }

  .uni-empty-img {
    width: 100px;
    height: 100px;
    margin: 0 auto 20px auto;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .uni-empty-label {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: $font-size-base;
    color: $font-hb;
  }
}
</style>
